<template>
    <div>
        <!-- 选项卡 -->
        <cmsTitle no-back />
        <div class="tabs flex flex-y flex-between">
            <div></div>
            <el-button type="primary" size="small" @click="ifShow = !ifShow">新增</el-button>
        </div>
        <!-- 内容 -->
        <div class="main">
            <el-table v-loading="loading" :data="formData" style="width: 100%">
                <el-table-column type="index" label="序号" width="120" />
                <el-table-column prop="functionName" label="姓名" />
                <el-table-column prop="functionName" label="手机号" />
                <el-table-column
                    prop="status"
                    label="账号状态">
                    <template slot-scope="scope">
                        <span :class="{'red':!scope.row.status}">{{filter_status(scope.row.status)}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="functionName" label="首次登陆时间" />
                <el-table-column prop="functionName" label="最近登陆时间" />
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="ifShow = !ifShow">修改</el-button>
                        <el-button type="text" @click="handle(scope.row)" v-if="scope.row.status">禁止</el-button>
                        <el-button type="text" @click="handle(scope.row)" v-else>解封</el-button>
                        <el-button type="text" @click="handle(scope.row)">注销</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新增 -->
        <newAccount :ifShow="ifShow"></newAccount>
    </div>
</template>

<script>
import newAccount from '@/components/system/account/newAccount'
export default {
    components:{
        newAccount
    },
    data () {
        return {
            loading: false,
            formData: [],
            ifShow:false
        }
    },
    mounted () {
        this.list();
    },
    methods: {
        // 列表
        list: function () {
            this.loading = true;
            HTTP('danger_list')
            .then(res => {
                if(res.code == 200){
                    this.loading = false;
                    this.formData = res.data;
                    if(this.formData.length>0){
                        this.switchDown = res.data[0].forceUp + '';
                    }
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
        //过滤 - 功能状态
        filter_status:function(e){
            return e?'正常':'已禁止';
        },
        // 删除
        handle: function (obj) {
            console.log(obj)
            HTTP('danger_status', {
                uid: obj.uid,
                status:obj.status?0:1
            })
            .then(res => {
                if(res.code == 200){
                    this.list();
                    this.common.msg('操作成功');
                }
                else{
                    this.common.msg(res.msg,'error');
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.title {
    padding: 15px;
    border-bottom: 1px solid #dedede;
}
.tabs {
    background-color: #fff;
    padding: 0 30px 20px 0;
    ul {
        li {
            padding: 0;
            margin-left: 30px;
            margin-right: 40px;
            height: 55px;
            line-height: 55px;
            cursor: pointer;
        }
        .active {
            color: $primary;
            border-bottom: 2px solid $primary;
        }
    }
}
.main {
    padding: 30px 50px;
    background-color: #fff;
    margin-top: 10px;
    min-height: calc(100vh - 200px);
}
//颜色
.red{
    color: $red;
}
</style>
